<template>
  <div class="chat-room"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { io } from "socket.io-client";

const socket = io();

onMounted(async () => {
  socket.on("connect", () => {
    console.log("连接成功");
  });
});
</script>

<style scoped>
.chat-room {
  display: flex;
  height: 100vh;
  padding: 20px;
  gap: 20px;
}

.room-list {
  width: 200px;
  border-right: 1px solid #eee;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f5f5f5;
}

.message.mine {
  background: #e3f2fd;
  margin-left: auto;
}

.input-area {
  padding: 20px;
  border-top: 1px solid #eee;
}

input {
  padding: 8px;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
}
</style>
